<!-- 编辑弹窗 -->
<template>
    <ele-modal
      inner
      width="80%"
      :movable="false"
      :visible="visible"
      :close-on-click-modal="true"
      custom-class="ele-dialog-form"
      :title="isUpdate ? '应付核销账明细' : '应付核销账明细'"
      @update:visible="updateVisible"
    >
    <div class="ele-body">
      <el-card>
        <!-- 搜索表单 -->
        <paymentauitListSearch @search="reload"  />
      </el-card>
      <el-card>
        <ele-pro-table ref="table"  row-key="id" :columns="warehouseItemColumns"  :selection.sync="selection"  :datasource="datasource"   @done="onDone" :need-page="true"  :height="tableHeight" :full-height="tableFullHeight" @selection-change="handleSelectionChange">
          <!-- 标题列 -->
          <template slot="surplusAmountCn" slot-scope="{ row }">
            ￥{{ row.surplusAmountCn }}
          </template>
           <!-- 标题列 -->
           <template slot="auitAmountCn" slot-scope="{ row }">
            ￥{{ row.auitAmountCn }}
          </template>
          <template slot="recAmountCn" slot-scope="{ row }">
            ￥{{ row.recAmountCn }}
          </template>
          <template slot="disAmountCn" slot-scope="{ row }">
            ￥{{ row.disAmountCn }}
          </template>
          <template slot="orderNo" slot-scope="{ row }">
            <el-link  type="primary"   @click="clickbillNo(row)" >{{ row.orderNo }}</el-link>
          </template>
        </ele-pro-table>
      </el-card>
    </div>
    <div slot="footer">
      <el-button type="primary" :loading="loading" @click="save" >
        确定
      </el-button>
    </div>
    </ele-modal>
  </template>
  <script>

  //初始化对像
  import { removePageTab } from '@/utils/page-tab-util';
  import paymentauitListSearch from './paymentauit-list-search.vue';
  import { QueryPayaccountauitByCondition } from '@/api/finance/payaccountauit';

  export default {
    name: 'PaymentauitList',
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
    },
    components:{paymentauitListSearch},
    data() {
      return {
        // 表单数据
        form: {},
        fixedHeight:true,
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        selectRows:[],
        //表格选中数据(多选)，如果要回显选中数据可在 done 事件里面使用 setSelectedRowKeys 方法
        selection: [],
        // 表格列配置
        warehouseItemColumns: [
          {type:"selection",columnKey: 'selection',label: '选择', width: 50, align: 'center',fixed: 'left'},
          {prop: 'orderNo', label: '单据编号', width: 120,showOverflowTooltip: true, sortable: 'orderNo',slot:'orderNo',align: 'center',},
          {prop: 'auitOrderTypeDesc', label: '单据类型',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'auitOrderType'},
          {prop: 'supplierDesc', label: '供应商',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'supplierId'},
          {
            prop: 'orderDate', label: '单据日期', width: 120,showOverflowTooltip: true, align: 'center',sortable: 'orderDate',
            formatter: (row, column, cellValue) => {return this.$util.toDateString(cellValue,"YYYY-MM-DD");}
          },
          // {prop: 'orderAmount', label: '订单金额',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'orderAmount'},
          // {prop: 'disAmount', label: '优惠金额',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'disAmount'},
          {prop: 'payAmount', label: '应付金额',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'payAmount'},
          {prop: 'auitAmount', label: '核销金额',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'auitAmount'},
          {prop: 'surplusAmount', label: '剩余金额',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'surplusAmount'},
          {prop: 'currencyDesc', label: '币种',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'currencyId'},
          {prop: 'rate', label: '汇率',width: 100, showOverflowTooltip: true, align: 'center', sortable: 'rate'},
          // {prop: 'orderAmountCn', label: '订单金额(RMB)',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'orderAmountCn'},
          // {prop: 'disAmountCn', label: '优惠金额(RMB)',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'disAmountCn'},
          {prop: 'payAmountCn', label: '应收金额(￥)',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'payAmountCn'},
          {prop: 'auitAmountCn', label: '核销金额(￥)',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'auitAmountCn'},
          {prop: 'surplusAmountCn', label: '剩余金额(￥)',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'surplusAmountCn'},
        ],
      };
    },
    computed: {
        // 表格高度
        tableHeight() {
          var fh = this.fixedHeight ? 'calc(100vh - 350px)' : void 0;
          return fh;
        },
        // 表格全屏时高度
        tableFullHeight() {
          var fh =  this.fixedHeight ? 'calc(100vh - 250px)' : null;
          return fh;
        },
      },
    methods: {

      /* 表格数据源 */
      async datasource(params) {

        params.where.pageindex = params.page;
        params.where.pagesize = params.limit;

        //添加排序
        if(params.order.order == null || params.order.order == undefined){
          params.where.orderBys = [{ sort: "createDate", order: 1, }];
        }else{
          params.where.orderBys = [];
          params.where.orderBys.push({sort:params.sorter.column.sortable,order:params.order.order=='asc'?0:1});
        }

        if(!params.where.conditions) params.where.conditions = [];

        if(this.form.supplierId){
          params.where.conditions.push({
            key:"supplierId",
            operator: 0,
            value:  this.form.supplierId,
          });
        }

        if(this.form.currencyId){
          params.where.conditions.push({
            key:"currencyId",
            operator: 6,
            value:  this.form.currencyId+','+this.form.rmb,
          });
        }

        params.where.conditions.push({
          key:"surplusAmount",
          operator: 2,
          value:  0,
        });


        let data = await QueryPayaccountauitByCondition(params.where);

        this.$nextTick(() => {
          this.$refs.table.doLayout();
        });

        return {
            list:data.items,
            count:data.totalrecords,
        };
      },

      /* 表格渲染完成回调 */
      onDone({ data }) {
        
        console.log('data',data);
      },

      save(){
        if(this.selectRows.length==0){
          this.$message({
            message: '没有选择应付核销账',
            type: 'warning'
          });
        }else{
          this.$emit('callback',this.selectRows );
          this.$emit('update:visible', false);
        }
      },

      //选择行数据
      handleSelectionChange(val) {
        this.selectRows = [];
        this.selectRows = val;
      },

      clickbillNo(row){
        removePageTab({ key: '/businesshandling/purordermanager' });
        this.$nextTick(() => {
          this.$router.push({path: '/businesshandling/purordermanager', query: { "billNo": row.orderNo } });
        });
      },

      /* 更新visible */
      updateVisible(value) {
        //更新父组件中的visible的值
        this.$emit('update:visible', value);
        //更新文件列表对像
      },

      /* 刷新表格 */
      reload(where) {
        if(this.$refs.table){
          this.$refs.table.reload({ where: where });
        }
      },

      /* 样式 */
      cellStyle(param){
        const { row, column, rowIndex, columnIndex } = param;
        if(columnIndex==4){
          return{
            color:'var(--color-primary)'
          }
        }
      },
  },
    
    /* 监听visible属性变化 */
    watch: {
      visible(visible) {
        if (visible) {
            //赋值this.form
          this.form = this.data;
          this.isUpdate = true;
          this.reload();
        } 
      }
    }
  };
  </script>